<template>
	<view class="body-bar">
		<view class="service-bar" v-for="item in serviceItemData" :key="item._id" style="width: 686rpx;">
			<view>
				<view>
					<text
						style="font-size: 32rpx;color: #333;line-height: 32rpx;margin-bottom: 32rpx; margin-bottom: 20rpx;display: inline-block;">{{item.name}}</text>
					<view style="font-size: 28rpx;color: #999;margin-bottom: 20rpx;">剩余次数：<text
							style="color:red;">{{item.count}}</text>次</view>
					<view class="tag-item" v-if="item.type=='免费项目'">{{item.type}}</view>
					<view class="tag-item" v-else style="color: #FA746B;background-color: rgba(250, 116, 107, 0.2);">
						{{item.type}}
					</view>

				</view>
			</view>
			<view class="toItem" @click="toServiceStep(item._id)">服务记录</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getServicePackageByUserApi,
		getserviceByPackApi
	} from '../../../api/servicePackage';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		onLoad,
	} from '@dcloudio/uni-app';

	const serviceItemData = ref([])
	const userStore = useUserStore()

	onLoad((options) => {
		getservice(options._id)
	})


	// 跳转服务进度
	function toServiceStep(data) {
		uni.navigateTo({
			url: `/serviceStep/pages/serviceRecord/serviceRecord?_id=${data}`
		})
	}

	// 获取居民服务
	function getservice(data) {
		getserviceByPackApi({
				servicePackId: data
			})
			.then(res => {
				if (res.code == 200) {
					serviceItemData.value = res.data
				}
			})
	}
</script>

<style scoped>
	.body-bar {
		min-height: 100vh;
		width: 750rpx;
		background-color: rgba(242, 242, 242, 1);
		padding: 32rpx 32rpx 0;

	}

	.service-bar {
		width: 686rpx;
		min-height: 260rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 32rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.service-bar image {
		width: 160rpx;
		height: 124rpx;
		margin-right: 10rpx;
	}

	.service-bar>view>view {
		display: inline-block;

	}

	.service-bar>view {
		display: flex;
		align-items: center;
	}

	.tag-bar {
		display: inline-block;
		min-height: 48rpx;
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.tag-item {
		white-space: nowrap;
		width: 66px;
		height: 48rpx;
		font-size: 24rpx;
		display: inline-block;

		box-sizing: border-box;
		color: #3DD4A7;
		background-color: rgba(61, 212, 167, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;

		line-height: 24rpx;
		border-radius: 16rpx;
	}

	.toItem {
		height: 64rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(41, 132, 248, 1);
		border-radius: 16rpx;
		padding-bottom: 6rpx;
	}
</style>